<template>
  <div class="ai-annotation-demo">
    <!-- 顶部导航栏 -->
    <div class="demo-header">
      <div class="header-left">
        <h1 class="demo-title">Qwen3-VL 视觉标注平台演示</h1>
        <p class="demo-subtitle">AI 辅助 + 人工校准 全流程可视化</p>
      </div>
      <div class="header-right">
        <button class="back-btn" @click="goBack">← 返回首页</button>
      </div>
    </div>

    <!-- 主体内容区：三分栏布局 -->
    <div class="demo-main">
      <!-- 左侧：功能选择区 -->
      <div class="left-panel">
        <div class="panel-title">功能配置</div>
        
        <!-- 演示任务选择 -->
        <div class="config-section">
          <label class="config-label">演示任务</label>
          <select class="config-select" v-model="selectedTask">
            <option value="danger-action">危险动作识别 - 幼儿</option>
          </select>
        </div>

        <!-- 演示选项 -->
        <div class="config-section">
          <label class="config-label">演示选项</label>
          <div class="checkbox-group">
            <label class="checkbox-item">
              <input type="checkbox" v-model="options.autoRunAI" />
              <span>AI 预标注自动运行</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="options.showConfidence" />
              <span>显示标注置信度</span>
            </label>
            <label class="checkbox-item">
              <input type="checkbox" v-model="options.highlightManual" />
              <span>人工校准步骤高亮</span>
            </label>
          </div>
        </div>

        <!-- 开始演示按钮 -->
        <button class="start-btn" @click="startDemo" :disabled="isPlaying">
          {{ isPlaying ? '演示中...' : '开始演示' }}
        </button>
      </div>

      <!-- 中间：动画演示主区 -->
      <div class="center-panel">
        <div class="panel-title">演示主区</div>
        
        <!-- 动画容器 -->
        <div class="animation-container">
          <!-- 上传数据界面 (步骤1) -->
          <div v-if="currentStep === 1" class="upload-container">
            <div class="upload-content">
              <h3 class="upload-title">步骤1：上传数据</h3>
              <div class="folder-image-container">
                <!-- 大文件夹图片 -->
                <div class="large-folder-icon">
                  <svg width="150" height="150" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
                  </svg>
                </div>
                
                <!-- 文件信息 -->
                <div class="file-info-display">
                  <div class="file-name-display">
                    <span class="file-icon">📁</span>
                    <span class="file-name-text">dataset_10k_images.zip</span>
                  </div>
                  <div class="file-size-display">10,000张图片 - 2.4 GB</div>
                </div>
                
                <!-- 进度条 -->
                <div class="progress-container">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
                  </div>
                  <div class="progress-text">{{ uploadProgress }}% 上传完成</div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 图像显示区 (步骤2及以上) -->
          <div v-else class="image-container">
            <!-- 原始图像 -->
            <img 
              src="./1.jpg" 
              alt="幼儿危险动作图像" 
              class="demo-image"
            />
            
            <!-- AI 预标注框 -->
            <div 
              v-for="(box, index) in aiAnnotations" 
              :key="index"
              class="annotation-box"
              :class="getConfidenceClass(box.confidence)"
              :style="{
                left: box.x + '%',
                top: box.y + '%',
                width: box.width + '%',
                height: box.height + '%',
                animationDelay: index * 0.2 + 's'
              }"
              v-show="currentStep >= 2"
            >
              <div class="box-label">{{ box.label }}</div>
              <div class="box-confidence" v-if="options.showConfidence">
                {{ (box.confidence * 100).toFixed(1) }}%
              </div>
            </div>
            
            <!-- 人工校准动画 -->
            <div 
              v-if="currentStep === 3" 
              class="manual-animation"
            >
              <div class="mouse-cursor"></div>
            </div>
            
          </div>

          <!-- 动画状态提示 -->
          <div class="animation-status">
            <div class="status-text">{{ currentStatus }}</div>
          </div>
          
          <!-- 步骤三确认按钮 -->
          <div v-if="currentStep === 3 && currentStatus === '人工校准完成'" class="confirm-button-container">
            <button class="confirm-btn" @click="goToStep4">确认校准完成</button>
          </div>
        </div>

        <!-- 步骤指示器 -->
        <div class="step-indicator">
          <div 
            v-for="(step, index) in steps" 
            :key="index"
            class="step-item"
            :class="{ active: currentStep === index + 1, completed: currentStep > index + 1 }"
          >
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-name">{{ step.name }}</div>
          </div>
        </div>
      </div>

      <!-- 右侧：流程说明区 -->
      <div class="right-panel">
        <div class="panel-title">流程说明</div>
        
        <div class="process-guide">
          <div 
            v-for="(step, index) in steps" 
            :key="index"
            class="guide-item"
            :class="{ active: currentStep === index + 1 }"
          >
            <div class="guide-icon">
              <svg :class="step.iconClass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path v-if="step.icon === 'upload'" d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
                <polyline v-if="step.icon === 'upload'" points="9 22 9 12 15 12 15 22"/>
                <path v-if="step.icon === 'ai'" d="M12 2L2 7l10 5 10-5-10-5z"/>
                <path v-if="step.icon === 'ai'" d="M2 17l10 5 10-5"/>
                <path v-if="step.icon === 'ai'" d="M2 12l10 5 10-5"/>
                <path v-if="step.icon === 'edit'" d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                <path v-if="step.icon === 'edit'" d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                <path v-if="step.icon === 'save'" d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                <polyline v-if="step.icon === 'save'" points="17 21 17 13 7 13 7 21"/>
                <polyline v-if="step.icon === 'save'" points="7 3 7 8 15 8"/>
              </svg>
            </div>
            <div class="guide-content">
              <div class="guide-title">步骤 {{ index + 1 }}: {{ step.name }}</div>
              <div class="guide-description">{{ step.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部控制区 -->
    <div class="demo-footer">
      <div class="footer-left">
        <div class="demo-info">
          <span class="info-label">当前步骤:</span>
          <span class="info-value">{{ steps[currentStep - 1]?.name || '未开始' }}</span>
        </div>
      </div>
      <div class="footer-right">
        <button 
          class="control-btn" 
          @click="resetDemo"
          :disabled="!isPlaying && currentStep === 1"
        >
          重新演示
        </button>
        <button 
          class="control-btn primary" 
          @click="togglePlayPause"
        >
          {{ isPlaying ? '暂停' : '继续' }}
        </button>
        <button 
          class="control-btn" 
          @click="downloadAnnotations"
          v-if="currentStep === 3"
        >
          下载标注结果
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回首页
const goBack = () => {
  router.push('/Xiaozhi/ALabel/index')
}

// 演示任务
const selectedTask = ref('car-detection')

// 演示选项
const options = ref({
  autoRunAI: true,
  showConfidence: true,
  highlightManual: true
})

// 动画状态
const isPlaying = ref(false)
const currentStep = ref(1)
const currentStatus = ref('点击开始演示按钮启动动画')
const uploadProgress = ref(0)

// AI 标注数据
const aiAnnotations = ref([
  { x: 25, y: 15, width: 50, height: 70, label: '危险动作 - 攀爬', confidence: 0.98 },
  { x: 30, y: 55, width: 35, height: 40, label: '危险动作 - 爬栏杆', confidence: 0.92 }
])

// 演示步骤
const steps = ref([
  {
    name: '上传数据',
    description: '上传需要标注的图像数据集。支持批量上传，系统会自动解析并准备标注任务。',
    icon: 'upload',
    iconClass: 'icon-upload'
  },
  {
    name: 'AI 预标注',
    description: 'Qwen3-VL 模型快速识别图像中的幼儿危险动作，自动生成标注框和标签。标注框颜色根据置信度变化：绿色(≥95%)、黄色(80%-94%)、红色(<80%)。',
    icon: 'ai',
    iconClass: 'icon-ai'
  },
  {
    name: '人工校准',
    description: '人工检查并修正标注。可以调整标注框边界、修改标签类型或删除误标注。',
    icon: 'edit',
    iconClass: 'icon-edit'
  },
  {
    name: '确认输出',
    description: '校准完成后提交标注结果，系统计算准确率并生成可下载的标注文件。',
    icon: 'save',
    iconClass: 'icon-save'
  }
])

// 定时器
let timer = null
let animationTimer = null

// 获取置信度对应的样式类
const getConfidenceClass = (confidence) => {
  if (confidence >= 0.95) return 'confidence-high'
  if (confidence >= 0.8) return 'confidence-medium'
  return 'confidence-low'
}

// 开始演示
const startDemo = () => {
  isPlaying.value = true
  currentStep.value = 1
  uploadProgress.value = 0
  playStep1()
}

// 播放第一步：上传数据
const playStep1 = () => {
  currentStatus.value = '数据上传中...'
  
  // 模拟上传进度 - 5秒完成
  const progressInterval = setInterval(() => {
    if (uploadProgress.value < 100) {
      uploadProgress.value += 5
    } else {
      clearInterval(progressInterval)
      currentStatus.value = '数据上传完成，准备AI预标注...'
      
      // 0.5秒后自动进入第二步（总时长约5秒）
      timer = setTimeout(() => {
        if (isPlaying.value) {
          currentStep.value = 2
          playStep2()
        }
      }, 500)
    }
  }, 250)
}

// 播放第二步：AI 预标注
const playStep2 = () => {
  currentStatus.value = 'AI 预标注进行中...'
  
  // 重置标注状态
  aiAnnotations.value = [
    { x: 25, y: 15, width: 50, height: 70, label: '危险动作 - 攀爬', confidence: 0.98 },
    { x: 30, y: 55, width: 35, height: 40, label: '危险动作 - 爬栏杆', confidence: 0.92 }
  ]
  
  animationTimer = setTimeout(() => {
    currentStatus.value = 'AI 预标注完成'
    
    // 2秒后自动进入第二步
    timer = setTimeout(() => {
      if (isPlaying.value) {
        currentStep.value = 3
        playStep3()
      }
    }, 2000)
  }, 1000)
}

// 播放第三步：人工校准
const playStep3 = () => {
  currentStatus.value = '人工校准优化中...'
  
  animationTimer = setTimeout(() => {
    // 模拟人工校准操作
  aiAnnotations.value[0].width = 55 // 调整标注框大小
  aiAnnotations.value[0].height = 75 // 调整标注框大小
  aiAnnotations.value[1].label = '危险动作 - 危险攀爬' // 修改标签
  aiAnnotations.value[1].confidence = 0.95 // 更新置信度
    
    currentStatus.value = '人工校准完成'
    // 不再自动进入第四步，等待用户点击确认按钮
  }, 3500)
}

// 点击确认按钮进入第四步
const goToStep4 = () => {
  if (isPlaying.value) {
    currentStep.value = 4
    playStep4()
  }
}

// 播放第四步：确认输出
const playStep4 = () => {
  currentStatus.value = '标注结果已保存，准确率 99.2%'
  
  animationTimer = setTimeout(() => {
    isPlaying.value = false
  }, 1000)
}

// 暂停/继续演示
const togglePlayPause = () => {
  if (isPlaying.value) {
    isPlaying.value = false
    clearTimeout(timer)
    clearTimeout(animationTimer)
  } else {
    isPlaying.value = true
    if (currentStep.value === 1) {
      playStep1()
    } else if (currentStep.value === 2) {
      playStep2()
    } else if (currentStep.value === 3) {
      playStep3()
    } else if (currentStep.value === 4) {
      playStep4()
    }
  }
}

// 重置演示
const resetDemo = () => {
  isPlaying.value = false
  currentStep.value = 1
  currentStatus.value = '点击开始演示按钮启动动画'
  clearTimeout(timer)
  clearTimeout(animationTimer)
}

// 下载标注结果
const downloadAnnotations = () => {
  const data = {
    image: 'car_image.jpg',
    annotations: aiAnnotations.value,
    accuracy: 99.2,
    timestamp: new Date().toISOString()
  }
  
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'annotations.json'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

// 组件卸载时清理定时器
onUnmounted(() => {
  clearTimeout(timer)
  clearTimeout(animationTimer)
})
</script>

<style scoped>
/* 全局样式 */
.ai-annotation-demo {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #333;
}

/* 顶部导航栏 */
.demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-left .demo-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-left .demo-subtitle {
  font-size: 14px;
  color: #666;
  margin: 5px 0 0 0;
}

.back-btn {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.back-btn:hover {
  background: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* 主体内容区 */
.demo-main {
  display: flex;
  gap: 20px;
  padding: 20px 30px;
  min-height: calc(100vh - 200px);
}

/* 公共面板样式 */
.left-panel, .center-panel, .right-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.panel-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
}

/* 左侧面板 */
.left-panel {
  width: 20%;
  min-width: 250px;
}

.config-section {
  margin-bottom: 25px;
}

.config-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #555;
}

.config-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.config-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.start-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.start-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.start-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 中间面板 */
.center-panel {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.animation-container {
  flex: 0 0 auto;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 600px;
  min-height: 400px;
}

.image-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.demo-image {
  width: 100%;
  height: auto;
  display: block;
}

/* 标注框样式 */
.annotation-box {
  position: absolute;
  border: 2px solid;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: fadeInScale 0.5s ease forwards;
  opacity: 0;
  transform: scale(0.9);
}

@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.confidence-high {
  border-color: #4caf50;
  background-color: rgba(76, 175, 80, 0.2);
}

.confidence-medium {
  border-color: #ff9800;
  background-color: rgba(255, 152, 0, 0.2);
}

.confidence-low {
  border-color: #f44336;
  background-color: rgba(244, 67, 54, 0.2);
}

.box-label {
  position: absolute;
  top: -22px;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.box-confidence {
  position: absolute;
  bottom: -22px;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 人工校准动画 */
.manual-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mouse-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #667eea;
  border-radius: 50%;
  background: rgba(102, 126, 234, 0.3);
  animation: mouseMove 3s ease-in-out forwards;
}

@keyframes mouseMove {
  0% {
    left: 75%;
    top: 40%;
    transform: scale(1);
  }
  30% {
    left: 70%;
    top: 45%;
    transform: scale(1.2);
  }
  60% {
    left: 68%;
    top: 43%;
    transform: scale(1);
  }
  100% {
    left: 70%;
    top: 45%;
    transform: scale(0);
  }
}

/* 上传界面样式 */
.upload-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.upload-content {
  text-align: center;
  padding: 30px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 100%;
  max-height: 400px;
  overflow-y: auto;
}

.upload-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
}

.folder-image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  width: 100%;
}

.large-folder-icon {
  color: #667eea;
  margin-bottom: 20px;
}

.file-info-display {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.file-name-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.file-icon {
  font-size: 24px;
}

.file-name-text {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.file-size-display {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.progress-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.progress-bar {
  height: 12px;
  background: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  text-align: center;
}

/* 确认按钮样式 */
.confirm-button-container {
  margin-top: 20px;
  text-align: center;
}

.confirm-btn {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.confirm-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.confirm-btn:active {
  transform: translateY(0);
}

/* 动画状态提示 */
.animation-status {
  margin-top: 20px;
  text-align: center;
}

.status-text {
  font-size: 16px;
  font-weight: 500;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 12px 24px;
  border-radius: 24px;
  display: inline-block;
}

/* 步骤指示器 */
.step-indicator {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px 0;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.step-name {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  transition: all 0.3s ease;
}

.step-item.active .step-number {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
  transform: scale(1.1);
}

.step-item.active .step-name {
  color: #667eea;
  font-weight: 600;
}

.step-item.completed .step-number {
  background: #4caf50;
  color: white;
}

.step-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 60px;
  width: 120px;
  height: 2px;
  background: #e0e0e0;
  z-index: -1;
}

.step-item.completed:not(:last-child)::after {
  background: #4caf50;
}

/* 右侧面板 */
.right-panel {
  width: 20%;
  min-width: 280px;
}

.process-guide {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.guide-item {
  display: flex;
  gap: 12px;
  padding: 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.guide-item.active {
  background: rgba(102, 126, 234, 0.1);
  border-left: 4px solid #667eea;
}

.guide-icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #667eea;
  border-radius: 8px;
  color: white;
  flex-shrink: 0;
}

.guide-icon svg {
  width: 24px;
  height: 24px;
}

.guide-content {
  flex: 1;
}

.guide-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.guide-description {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

/* 底部控制区 */
.demo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

.footer-left .demo-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

.info-label {
  font-size: 14px;
  color: #666;
}

.info-value {
  font-size: 14px;
  font-weight: 600;
  color: #667eea;
}

.footer-right {
  display: flex;
  gap: 12px;
}

.control-btn {
  padding: 10px 20px;
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.control-btn:hover:not(:disabled) {
  background: #e0e0e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.control-btn.primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.control-btn.primary:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.control-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .demo-main {
    flex-direction: column;
  }
  
  .left-panel, .center-panel, .right-panel {
    width: 100%;
    min-width: auto;
  }
  
  .center-panel {
    order: -1;
  }
  
  .step-item:not(:last-child)::after {
    width: 80px;
  }
}

@media (max-width: 768px) {
  .demo-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .demo-footer {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .footer-right {
    justify-content: center;
  }
  
  .step-indicator {
    flex-direction: column;
    gap: 20px;
  }
  
  .step-item:not(:last-child)::after {
    width: 2px;
    height: 40px;
    top: 60px;
    left: 20px;
  }
}
</style>